import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_li_ke_jie/entity/app_pay_result.dart';
import 'package:flutter_li_ke_jie/ui/home/vip_model.dart';
import 'package:flutter_li_ke_jie/utils/img_util.dart';

import '../../core/interface/common_interface.dart';
import '../../style/common_color.dart';
import '../../weight/pay_dialog.dart';
import '../pay/pay_result_page.dart';

///会员页面
class VipFragment extends StatefulWidget {
  const VipFragment({Key? key}) : super(key: key);

  @override
  _VipFragmentState createState() => _VipFragmentState();
}

class _VipFragmentState extends State<VipFragment>  with CommonInterface<VipModel>{
  late VipModel _vipModel;
  bool _isLoadData = false;//是否已经加载数据

  @override
  Widget build(BuildContext context) {
    _vipModel = model(context);
    if(!_isLoadData){
      _vipModel.getFirstVipProduct();
      _isLoadData = true;
    }
    return Scaffold(
      body: Container(
        color: color_1b2a45,
        child:ListView(
          shrinkWrap: true,
          children: [
            //头部
            _topCardBox(),
            //内容
            _content()
          ],
        )
      ),
    );
  }


  //头部卡片
  Widget _topCardBox(){
    return Container(
      padding: EdgeInsets.only(left: 20,right: 20,top: 30),
      color: color_1b2a45,
      child: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
              // image: AssetImage("images/3.0x/vip_card.png",),
              image: AssetImage("images/3.0x/vip_bg.png",),
              fit: BoxFit.fill, // 完全填充
            )
        ),
        child:Column(
          children: [
            //appbar
            SizedBox(height: 10,),
            Text("会员中心",style: TextStyle(color: Colors.white,fontSize: 18,fontWeight: FontWeight.bold),),
            SizedBox(height: 30,),
            Container(
              padding: EdgeInsets.only(left: 15,right: 15,top: 20,bottom: 20),
              decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("images/3.0x/vip_card.png",),
                    fit: BoxFit.fill, // 完全填充
                  )
              ),
              child:  Row(
                children: [
                  Expanded(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Image.asset(ImageUtil.loadLocalImg("me_vip.png"),height: 20,width: 20,),
                            SizedBox(width: 2,),
                            Text("粒刻借VIP尊享会员",style: TextStyle(color: Colors.white,fontSize: 16),)
                          ],
                        ),
                        SizedBox(height: 2,),
                        Text("季卡预计可省4899",style: TextStyle(color: Colors.white,fontSize: 14),)
                      ],
                    ),
                    flex: 2,
                  ),
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                          gradient: LinearGradient(colors: [
                            Color(0xFFFDF2CB),
                            Color(0xFFFFE1B4)
                          ]),
                          borderRadius: BorderRadius.all(Radius.circular(10))
                      ),
                      child: MaterialButton(
                        height: 30,
                        onPressed: (){

                        },
                        child: GestureDetector(
                          onTap: (){
                            showVipPayDialog(context);
                          },
                          child:  const Text("立即领取",style: TextStyle(color: color_774418,fontSize: 18),),
                        )
                      ),
                    ),
                    flex: 1,
                  ),
                ],
              ),
            )
          ],
        )
      ),
    );
  }

  //内容去
  Widget _content(){
    return ListView(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      padding: EdgeInsets.only(top: 0),
      children: [
        Container(
          padding: EdgeInsets.only(left: 10,right: 10,top: 30),
          decoration: BoxDecoration(
            color: color_f7,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15)),
          ),
          child: Column(
            children: [
              //标题
              _contentTitle(),
              SizedBox(height: 20,),
              //特权卡片
              _privilegeCard(),
              SizedBox(height: 20,),
              //特权1
              _privilege1Box(),
              SizedBox(height: 20,),
              //特权2
              _privilege2Box(),
              SizedBox(height: 20,),
              //底部支付
              _bottomPay(),
              SizedBox(height: 20,),
            ],
          ),
        )
      ],
    );
  }
  
  //内容标题
  Widget _contentTitle(){
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(ImageUtil.loadLocalImg("vip_line_right.png"),height: 10,),
        SizedBox(width: 10,),
        Text("会员特权",style: TextStyle(color: color_1e,fontSize: 18,fontWeight: FontWeight.bold),),
        SizedBox(width: 10,),
        Image.asset(ImageUtil.loadLocalImg("vip_line_left.png"),height: 10,),
      ],
    );
  }

  //特权卡片
  Widget _privilegeCard(){
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_compensate.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("拒就赔",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("最高10000元",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_product.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("专属产品",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("20+会员产品",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
        Expanded(child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Column(
            children: [
              Image.asset(ImageUtil.loadLocalImg("vip_right.png"),width: 50,height: 50,),
              SizedBox(height: 5,),
              Text("生活权益",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text("吃喝玩乐省",style: TextStyle(color: color_999,fontSize: 14),),
            ],
          ),
        ),flex: 1,),
        SizedBox(width: 10,),
      ],
    );
  }

  //特权1
  Widget _privilege1Box(){
      return Column(
        children: [
          Row(
            children: [
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    Color(0xFF317EFF),
                    Color(0xFF265FF5)
                  ]),
                  borderRadius: BorderRadius.all(Radius.circular(3))
                ),
                padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
                child: Text("特权1",style: TextStyle(color: Colors.white,fontSize: 14),),
              ),
              SizedBox(width: 5,),
              Text("拒就赔",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),)
            ],
          ),
          SizedBox(height: 20,),
          Image.asset(ImageUtil.loadLocalImg("vip_banner.png"))
        ],
      );
  }

  //特权2
  Widget _privilege2Box(){
    return Column(
      children: [
        Row(
          children: [
            Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    Color(0xFF317EFF),
                    Color(0xFF265FF5)
                  ]),
                  borderRadius: BorderRadius.all(Radius.circular(3))
              ),
              padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
              child: Text("特权2",style: TextStyle(color: Colors.white,fontSize: 14),),
            ),
            SizedBox(width: 5,),
            Text("专属会员产品",style: TextStyle(color: color_1e,fontSize: 16,fontWeight: FontWeight.bold),)
          ],
        ),
        SizedBox(height: 20,),
        _productVipItem(),
      ],
    );
  }

  //vip产品
  Widget _productVipItem() {
    return Stack(
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 10,right: 5),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(10))),
          padding: EdgeInsets.all(10),
          child: Column(
            children: [
              //头部
              Row(
                children: [
                  Image.network(
                    _vipModel.firstVipProduct.logoUrl,
                    height: 36,
                    width: 36,
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  Text(
                    "${_vipModel.firstVipProduct.name}",
                    style: TextStyle(
                        color: color_1e,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    width: 10,
                  ),
                  //标签1
                  _labelWidget("方便快捷", color_e0f, color_3775F6),
                  SizedBox(
                    width: 5,
                  ),
                  //标签2
                  _labelWidget("下款率15%", color_FFF7E8, color_D08D18),
                  //图标
                  // Expanded(
                  //   child: Container(
                  //     alignment: Alignment.centerRight,
                  //     child: Image.asset(
                  //       ImageUtil.loadLocalImg("loan_vip.png"),
                  //       height: 20,
                  //     ),
                  //   ),
                  //   flex: 1,
                  // )
                ],
              ),
              SizedBox(height: 10,),
              //内容
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  //左边金额
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("${_vipModel.firstVipProduct.maxPrice}",style: TextStyle(color: color_fa2,fontSize: 28,fontWeight:FontWeight.bold),),
                      SizedBox(height: 2,),
                      Text("最高可借款额度(元)",style: TextStyle(color: color_999,fontSize: 14),),
                    ],
                  ),
                  SizedBox(width: 10,),
                  //中间标签
                  Column(
                    children: [
                      Text("日利率${_vipModel.firstVipProduct.dayRate}",style: TextStyle(color: color_999,fontSize: 14),),
                      SizedBox(height: 2,),
                      Text("期限3-36月",style: TextStyle(color: color_999,fontSize: 14),),
                    ],
                  ),
                  SizedBox(width: 20,),
                  //左边按钮
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                          gradient: LinearGradient(colors: [
                            Color(0xFFF4D0A1),
                            Color(0xFFFFA200)
                          ]),
                          borderRadius: BorderRadius.all(Radius.circular(10))
                      ),
                      child: MaterialButton(
                        onPressed: (){
                          showVipPayDialog(context);
                        },
                        child: const Text("去申请",style: TextStyle(color: color_774418,fontSize: 18),),
                      ),
                    ),
                    flex: 1,
                  )
                ],
              ),
              SizedBox(height: 10,),
              //底部
              Container(

                padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5),
                decoration: BoxDecoration(
                    color: color_FFF9ED,
                    borderRadius: BorderRadius.all(Radius.circular(10))
                ),
                child: Row(
                  children: [
                    Row(
                      children: [
                        Image.asset(ImageUtil.loadLocalImg("loan_correct_yellow.png"),height: 20,width: 20,),
                        SizedBox(width: 5,),
                        Text("方便快捷",style: TextStyle(color: color_FFA200,fontSize: 14),)
                      ],
                    ),
                    SizedBox(width: 30,),
                    Expanded(
                      child:Row(
                        children: [
                          Image.asset(ImageUtil.loadLocalImg("loan_correct_yellow.png"),height: 20,width: 20,),
                          SizedBox(width: 5,),
                          Text("最后一笔下款时间:3分钟前",style: TextStyle(color: color_FFA200,fontSize: 14),)
                        ],
                      ),
                      flex: 1,
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        Positioned(
          child: Image.asset(
            ImageUtil.loadLocalImg("loan_vip.png"),
            height: 20,
          ),
          right: 0,
          top: 20,
        )
      ],
    );
  }

  //标签组件
  Widget _labelWidget(String label, Color bgColor, Color textColor) {
    return Container(
        padding: EdgeInsets.only(left: 10, right: 10, top: 3, bottom: 3),
        decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.all(Radius.circular(10))
        ),
        child: Center(
          child: Text(label, style: TextStyle(color: textColor, fontSize: 12),),
        )
    );
  }

  //底部支付
  Widget _bottomPay(){
    return GestureDetector(
      onTap: (){
        showVipPayDialog(context);

        // Navigator.push(context,MaterialPageRoute(builder:
        //     (BuildContext context)=> PayResultPage( AppPayResult(outTradeNo:"20220609880237",vipNum: 3,shopdate: "20220609"))));
      },
      child: Container(
        padding: EdgeInsets.only(left: 20,right: 20,top: 20,bottom: 20),
        decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/3.0x/vip_button.png",),
              fit: BoxFit.fill, // 完全填充
            )
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
                children: [
                  Text("￥",style: TextStyle(color: Colors.white,fontSize: 16,),),
                  Text("39.9",style: TextStyle(color:  Colors.white,fontSize: 30,fontWeight: FontWeight.bold),),
                  Text("/季度",style: TextStyle(color:  Colors.white,fontSize: 16))
                ]
            ),
            Text("立即开通",style: TextStyle(color: color_774418,fontSize: 20,fontWeight: FontWeight.bold),),
          ],
        ),
      ),
    );
  }

}
